<template>
  <div>
     <div class="ptem">
        <div class="i2d6">
          <label>组件排版方式</label>
        </div>
        <div class="i4d6">
          <div class="i6d6 btn-group">
            <el-radio-group v-model="value.layout" size="mini" @change="layout_change">
              <el-radio-button label="LR">左右</el-radio-button>
              <el-radio-button label="UD">上下</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="ptem setting-tit" v-show="value.layout=='LR'">
        <div class="i2d6">
          <label>标题所占宽度</label>
        </div>
          <div class="i6d6 btn-group">
            <el-radio-group v-model="value.titleWidth" size="mini">
              <el-radio-button label="1">1/6</el-radio-button>
              <el-radio-button label="2">2/6</el-radio-button>
              <el-radio-button label="3">3/6</el-radio-button>
              <el-radio-button label="4">4/6</el-radio-button>
              <el-radio-button label="5">5/6</el-radio-button>
              <!--
                          占比6/6为上下布局，可直接选择上下布局， 可去掉6/6选项
              <el-radio-button label="6">6/6</el-radio-button>
              -->
            </el-radio-group>
          </div>
      </div>
      <div class="ptem setting-tit">
        <div class="i2d6">
          <label>组件宽度</label>
        </div>
          <div class="i6d6 btn-group">
            <el-radio-group v-model="value.selfWidth" size="mini">
              <el-radio-button label="20">20</el-radio-button>
              <el-radio-button label="40">40</el-radio-button>
              <el-radio-button label="50">50</el-radio-button>
              <el-radio-button label="60">60</el-radio-button>
              <el-radio-button label="80">80</el-radio-button>
              <el-radio-button label="100">100</el-radio-button>
            </el-radio-group>
        </div>
      </div>
  </div>
</template>

<script>
export default{
  props:{
    value:{
      type:Object
    },
    model:{
      prop:'value'
    }
  },
  methods:{
    layout_change:function(layoutType){
      this.value.layout=layoutType
      this.value.layout=layoutType
      if(layoutType == 'UD'){
        this.value.titleWidth=6
      }else{
        this.value.titleWidth=1
      }
    }
  }
}
</script>
